<template>
	<view>
		<!-- <scroll-view scroll-y="true"> -->
		<view class="form-list-wrap word5">
			<view class="form-list-item">
				<text class="form-list-item-label required">业主姓名：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入姓名" v-model="params['联系人姓名']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">联系电话：</text>
				<input class="form-list-item-input" type="number" placeholder="请输入电话号码" v-model="params['联系人电话']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">装修地址：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入装修地址" v-model="params['报事位置']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">装修事项：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入装修事项" v-model="params['装修申请工单']['装修事项']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">装修期限：</text>
				<view class="form-list-item-input">
					<view v-if="isChoose" style="color: #777;" @click="showPicker">{{chooseDate}}</view>
					<view v-else @click="showPicker">{{chooseDate}}</view>
					<rangeDatePick :show="isShow" @showchange="showchange" :start="startTime" end="2200-12-01" :value="value" @change="bindChange"
					 @cancel="bindCancel" themeColor="#4C83D6" fields="day"></rangeDatePick>
				</view>
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">施工单位：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入施工单位名称" v-model="params['装修申请工单']['施工单位']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">施工负责人：</text>
				<input class="form-list-item-input" type="text" placeholder="请输入姓名" v-model="params['装修申请工单']['施工负责人']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">负责人电话：</text>
				<input class="form-list-item-input" type="number" placeholder="请输入电话号码" v-model="params['装修申请工单']['负责人电话']">
			</view>
			<view class="form-list-item">
				<text class="form-list-item-label required">所属小区：</text>
				<!-- <input type="text" placeholder="请输入装修地址"> -->
				<text>{{userInfo.projName}}</text>
				<!-- <view class="form-list-item-input">
					<view style="width: 516rpx;" class="type" @click="handleTap('picker')">{{label1}}</view>
					<lb-picker ref="picker" v-model="value1" mode="selector" :list="projectList" :dataset="{ name: 'label1' }" @change="handleChange"
					 @confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
				</view> -->
			</view>
			<!-- <view class="form-list-item">
				
				<text class="form-list-item-label required">所属小区：</text>
				<single-picker class="form-list-item-input" :list="projectList" v-model="params['所属项目id']"  />
			</view> -->
			<view class="form-list-item" style="flex-direction: column;">
				<textarea fixed class="text" style="width: 730rpx;height: 220rpx;" placeholder="请输入报事描述..." v-model="params['报事描述']" />
				<uploader ref="uploader"  @input='onchange' />
			</view>
				<button class="btn" @click="handleSubmit">提交申请</button>
				<view class="renovation-notice" >提交即代表您已阅读并同意<span @click="goRenovationNotice">装修须知</span></view>
			</view>
		<!-- </scroll-view> -->
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker/index.vue'
	import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
	// import { previewImg } from '@/utils/previewImg'
	import uploader from '@/myComponents/image-uploader.vue'
	import dayjs from 'dayjs'
	// import singlePicker from '@/components/my-components/single-picker.vue'
	
	export default {
		components: {
			LbPicker,
			rangeDatePick,
			uploader
		},
		data() {
			return {
				currentProject:null,
				params: {
					操作类型: 'submit',
					工单类型: 'G',
					联系人姓名: '',
					联系人电话: '',
					报事描述: '',
					报事位置: '',
					上门时间: '',
					装修申请工单: {
						施工单位: '',
						施工负责人: '',
						负责人电话: '',
						装修开始时间: '',
						装修结束时间: '',
						装修事项: ''
					},
					所属项目id: null,
					报事附件: []
				},
				isShow: false,
				value: [dayjs(new Date()).format('YYYY-MM-DD')],
				value1: '',
				label1: '',
				chooseDate: '请选择装修期限',
				file: {
					fileData: null,
					fileName: null
				},
				接单人id: null,
				loading: true,
				fileIds: [],
				startTime: dayjs(new Date()).format('YYYY-MM-DD'),
				isChoose: true,
				userInfo: {}
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.params.联系人姓名 = this.userInfo.name
			this.params.所属项目id = this.userInfo.projId
			this.params.联系人电话 = this.userInfo.mobile
		},
		methods: {
			ontest(){
				console.log(this.params["所属项目id"])
			},
			onchange(e) {
				this.params.报事附件 = e
				// console.log(e)
			},
			getData(time) {
				console.log(time, '回调时间')
			},
			showchange(){
				this.isShow=!this.isShow;
			},
			// 装修期限
			bindChange(data){
				this.isChoose = false
				console.log(data)
				this.params.装修申请工单.装修开始时间 = dayjs(data[0]).format('YYYY-MM-DDTHH:mm:ssZ')
				this.params.装修申请工单.装修结束时间 = dayjs(data[1]).format('YYYY-MM-DDTHH:mm:ssZ')
				this.chooseDate=data[0]+"至"+data[1]
			},
			showPicker(e){
				this.isShow=true
			},
			bindCancel(e){
				console.log(e)
			},
			handleCancel(e) {
				uni.showTabBar({
					animation: true
				})
				console.log('cancel::', e)
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {
				console.log('change::', e)
			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
				console.log('confirm::', e)
				if (e) {
					const name = e.dataset.name
					// this.params.所属项目id = e.item.id
					this.params.所属项目id = e.item.id
					// this.params2.所属项目id = e.item.id
					const label = e.item.label
					if (name && label) {
						this[name] = label
					}
				}
			},
			handleSubmit() {
				if(this.params.联系人姓名.trim() == ''){
					uni.showToast({
						title: '请填写业主姓名',
						icon: 'none'
					})
				}else if(this.params.联系人电话.trim() == ''){
					uni.showToast({
						title: '请填写联系电话',
						icon: 'none'
					})
				}else if(/^1[3456789]\d{9}$/.test(this.params.联系人电话) === false){
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					})
				}else if(this.params.报事位置.trim() == ''){
					uni.showToast({
						title: '请填写装修地址',
						icon: 'none'
					})
				}else if(this.params.装修申请工单.装修事项.trim() == ''){
					uni.showToast({
						title: '请填写装修事项',
						icon: 'none'
					})
				}else if(this.params.装修申请工单.装修开始时间.trim() == ''){
					uni.showToast({
						title: '请填写装修期限',
						icon: 'none'
					})
				}else if(this.params.装修申请工单.施工单位.trim() == ''){
					uni.showToast({
						title: '请填写施工单位',
						icon: 'none'
					})
				}else if(this.params.装修申请工单.施工负责人.trim() == ''){
					uni.showToast({
						title: '请填写施工负责人',
						icon: 'none'
					})
				}else if(this.params.装修申请工单.负责人电话.trim() == ''){
					uni.showToast({
						title: '请填写负责人电话',
						icon: 'none'
					})
				}else if(/^1[3456789]\d{9}$/.test(this.params.装修申请工单.负责人电话) === false){
					uni.showToast({
						title: '请填写正确的手机号码',
						icon: 'none'
					})
				}else {
					this.createTicket()
				}
			},
			createTicket() {
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.$http2.post('ticketSystem/ticket/submit', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						uni.redirectTo({
							url: '../success/success?path=../index/index' + '&title=返回报事页面'
						})
					}
				})
			},
			goRenovationNotice() {
				uni.navigateTo({
					url: '../renovationNotice/renovationNotice'
				})
			}
		}
	}
</script>

<style lang="scss">
	.form-list-item {
		.margin {
			margin-right: 30rpx;
		}
	}
</style>